* {
    box-sizing: border-box;
    margin: 0;
    padding:0;
}

body {
    background: #101010;
    overflow: hidden;
    text-align: center;
}

#wrapper {
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width:100%;
    max-width: 1600px;
    max-height: 1200px;
    height:100%;

    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    border:1px solid #454545;

}

#panelcenter {
    width:800px;
    position: relative;
    height: 100%;
    background: #262220;
}

#canvas {
    background: #151515;
    position: absolute;
    top:60px;

    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;

    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

#panelred, #panelblue {
    background: #151515;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;

    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;

    position: relative;
    height: 100%;
}

#codered, #codeblue {
    position: absolute;
    z-index: 99;
    top:60px;
    left:0;
    right:0;
    bottom:120px;
    font-size: 1.5em;
    font-weight: 800;
    border: 1px inset #333;
    background: #262220;
    min-width: 100%;
    min-height: 800px;
    max-height: 800px;
    padding: 16px;
}

#panelred {
    background: red;
}

#codered {
    color: #ffb000;
    min-width: 100%;
    max-width: 100%;
}

#panelblue {
    background: blue;
}

#codeblue {
    color: #50eeff;
    max-width: 800px;
}